<template>
  <view cclass="musicdetail">
    <view class="fixbg" :style="{ backgroundImage: 'url(' + songDetail.al.picUrl + ')' }"></view>
    <!-- 顶部header区域 -->
    <MusicHead :title="songDetail.al.name" :isShow="true" textColor="#fff"></MusicHead>
    <!-- 内容主体区域 -->
    <view class="content" v-show="!isLoading">
      <scroll-view scroll-y="true">
        <!-- 网易云音乐 -->
        <view class="ad">
          <image src="../../static/images/wy_logo.jpg" mode=""></image>
          <image src="../../static/images/wy.png" mode=""></image>
        </view>

        <!-- 播放圆盘区域 -->
        <view class="song-play" @tap="isPlay">
          <image :src="songDetail.al.picUrl" :class="{ 'image-run': isPlayRotate }"></image>
          <text class="iconfont" :class="iconPlay"></text>
          <view class=""></view>
        </view>

        <!-- 歌词区域 -->
        <view class="song-lyric">
          <view class="song-lyric-warp" :style="{transform:'translateY('+ -(lyricIndex-1)*80 +'rpx)'}">
            <view class="song-lyric-item" v-for="(item, index) in songLyric" :key="index" :class="{ active: lyricIndex === index }">{{ item.lyric }}</view>
          </view>
          <!-- <view class="song-lyric-warp">
            <view class="song-lyric-item" v-for="(item, index) in songLyric" :key="index" :class="{ active: lyricIndex === index }">{{ item.lyric }}</view>
          </view> -->
        </view>

        <!-- 在网易云音乐查看更多歌词 -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="more">在网易云音乐查看更多歌词</view>
        <!-- #endif -->
        
        <!-- #ifdef MP-WEIXIN -->
        <button type="default" open-type="share" class="share-btn">分享给微信好友</button>
        <!-- #endif -->

        <!-- 喜欢这首歌的人也听 -->
        <view class="detail-like">
          <view class="detail-like-head">
            <text>喜欢这首歌的人也听</text>
            <view @tap="handleToSimiAll"><text class="iconfont icon-bofang"></text>一键收听</view>
          </view>
          <view class="detail-like-main">
            <view class="like-main-item" v-for="(item, index) in songSimi" :key="index" @tap="handlerToSimi(item.id)">
              <view>
                <image :src="item.album.picUrl"></image>
              </view>
              <view>
                <view class="songName">{{ item.album.name }}</view>
                <view class="songAr">
                  <image src="../../static/images/sq.png" v-if="item.privilege.maxbr === 999000"></image>
                  <image src="../../static/images/vip.png" v-if="item.privilege.fee === 1"></image>
                  <text v-for="(item1, i) in item.album.artists" :key="i">{{ item1.name }}{{ i === item.album.artists.length - 1 ? '' : ' / ' }}</text>
                  <text>{{ ' ' }}- {{ item.album.name }}</text>
                </view>
              </view>
              <view><text class="iconfont icon-bofang1"></text></view>
            </view>
          </view>
        </view>

        <!-- 精彩评论 -->
        <view class="detail-comment">
          <view class="comment-head">精彩评论</view>
          <view class="comment-main">
            <view class="comment-main-item" v-for="(item, index) in songComment" :key="item.commentId">
              <!-- 左侧头像 -->
              <view class="comment-l">
                <image :src="item.user.avatarUrl"></image>
              </view>
              <!-- 右侧评论信息 -->
              <view class="comment-r">
                <!-- 用户、点赞数、评论时间 -->
                <view>
                  <view class="comment-msg">
                    <text>{{ item.user.nickname }}</text>
                    <text>{{ item.timeStr }}</text>
                  </view>
                  <view class="comment-count">{{ item.likedCount | Countformat }}<text class="iconfont icon-dianzan"></text></view>
                </view>
                <!-- 评论内容 -->
                <view class="comment-content">{{ item.content }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import '@/common/iconfont.css'
import { songDetail, songSimi, songComment, songLyric, songUrl } from '@/api/getMusicDetail.js'

export default {
  data() {
    return {
      // 歌曲详情
      songDetail: {
        al: {
          picUrl: ''
        }
      },
      // 相似歌曲
      songSimi: [],
      // 歌曲评论,取10条
      songComment: [],
      // 歌词
      songLyric: [],
      // 歌词选中的索引
      lyricIndex: 0,
      // 背景音频管理器实例对象
      bgAudioManager: '',
      // 默认播放音乐
      iconPlay: 'icon-zanting',
      // 默认图片旋转
      isPlayRotate: true,
      timer: null,
      isLoading:true
    }
  },
  onLoad(options) {
    // this.songId = options.id
    console.log(options.id)
    this.getMusicDetail(options.id)
   
  },
  // 页面卸载时
  onUnload() {
    clearInterval(this.timer)
    this.timer = null
    // #ifdef H5
    this.bgAudioManager.destroy()
    this.iconPlay = 'icon-bofang'
    this.isPlayRotate = false
    // #endif
    
  },
  // 页面隐藏时
  onHide() {
    clearInterval(this.timer)
    this.timer = null
    // #ifdef H5
    this.bgAudioManager.destroy()
    this.iconPlay = 'icon-bofang'
    this.isPlayRotate = false
    // #endif
  },
  watch:{
    songDetail:{
      handler:function(newVal){
        // #ifdef H5
        clearInterval(this.timer)
        this.timer = null
        // #endif
      },
      deep:true
    }
  },
  methods: {
    getMusicDetail(id) {
      this.$store.commit('NEXT_ID',id)
      uni.showLoading({
        title:'加载中...'
      })
      this.isLoading = true
      
      // songDetail(id)
      Promise.all([songDetail(id), songSimi(id), songComment(id, 10), songLyric(id), songUrl(id)]).then(res => {
        console.log(res)
        if (res[0].data.code === 200) {
          // 歌曲详情
          this.songDetail = res[0].data.songs[0]
        }
        if (res[1].data.code === 200) {
          // 相似音乐
          this.songSimi = res[1].data.songs
          // 保存相似音乐的歌单歌曲id列表
          let songSimiIds = []
          this.songSimi.forEach(item=>{
            songSimiIds.push(item.id)
          })
          this.$store.commit('INIT_LIKELISTIDS',songSimiIds)
        }
        if (res[2].data.code === 200) {
          // 歌曲评论
          this.songComment = res[2].data.hotComments.slice(0, 10)
        }
        if (res[3].data.code === 200) {
          // 歌词
          let lyricStr = res[3].data.lrc.lyric
          let reg = /\[([^\]]+)\]([^\[]+)/g
          let result = []
          lyricStr.replace(reg, ($0, $1, $2) => {
            result.push({ time: this.dateFormat($1), lyric: $2 })
          })
          this.songLyric = result
          console.log(this.songLyric)
        }
        // 播放音乐
        if (res[4].data.code === 200) {
          // 音乐url
          // #ifdef MP-WEIXIN
          this.bgAudioManager = uni.getBackgroundAudioManager()
          this.bgAudioManager.title = this.songDetail.al.name
          this.bgAudioManager.singer = '暂无'
          // #endif
          
          // #ifdef H5
          if(!this.bgAudioManager){
            this.bgAudioManager = uni.createInnerAudioContext()
          }
           this.iconPlay = 'icon-bofang'
           this.isPlayRotate = false
           this.bgAudioManager.autoplay = false
          // #endif
          
          // bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
          this.bgAudioManager.src = res[4].data.data[0].url || ''
          
          // #ifdef MP-WEIXIN
          this.listenLyricIndex()
          // #endif
          
          // 监听歌曲播放
          this.bgAudioManager.onPlay(() => {
            this.iconPlay = 'icon-zanting'
            this.isPlayRotate = true
            this.listenLyricIndex()
          })
          // 监听歌曲暂停时
          this.bgAudioManager.onPause(() => {
            clearInterval(this.timer)
            this.timer = null
            this.iconPlay = 'icon-bofang'
            this.isPlayRotate = false
          })
          // 监听歌曲自然播放结束时
          this.bgAudioManager.onEnded(()=>{
            this.getMusicDetail(this.$store.state.nextId)
          })
        }
        uni.hideLoading()
        this.isLoading = false
      })
    },
    // 将分钟转换为秒数
    dateFormat(value) {
      let arr = value.split(':')
      return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(1)
    },
    // 音乐是否播放
    isPlay() {
      if (this.bgAudioManager.paused) {
        this.bgAudioManager.play()
      } else {
        this.bgAudioManager.pause()
      }
    },
    // 歌词滚动
    listenLyricIndex() {
      clearInterval(this.timer),
        (this.timer = setInterval(() => {
          for (var i = 0; i <= this.songLyric.length - 1; i++) {
            if (this.bgAudioManager.currentTime >= this.songLyric[this.songLyric.length - 1].time) {
              this.lyricIndex = this.songLyric.length - 1
              break
            }
            if (this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i + 1].time) {
              this.lyricIndex = i
            }
            console.log(this.lyricIndex)
          }
        }, 1000))
    },
    // 点击播放相似音乐
    handlerToSimi(songId) {
      this.getMusicDetail(songId)
    },
    handleToSimiAll(){
      this.getMusicDetail(this.$store.state.likeListIds[0])
    }
  }
}
</script>

<style scoped>
.ad {
  position: absolute;
  top: 60rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
}

.ad image:nth-of-type(1) {
  width: 38rpx;
  height: 38rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.ad image:nth-of-type(2) {
  width: 148rpx;
  height: 30rpx;
}

.song-play {
  position: relative;
  width: 580rpx;
  height: 580rpx;
  background-image: url();
  background-size: 100%;
  margin: 254rpx auto 0;
}

.song-play image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 370rpx;
  height: 370rpx;
  border-radius: 50%;
  animation: 15s linear move infinite;
  animation-play-state: paused;
}
.song-play .image-run {
  animation-play-state: running;
}
@keyframes move {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.song-play text {
  width: 100rpx;
  height: 100rpx;
  font-size: 100rpx;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.song-play view {
  position: absolute;
  right: 80rpx;
  top: -200rpx;
  width: 230rpx;
  height: 360rpx;
  background-image: url(@/static/images/needle.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.song-lyric {
  font-size: 30rpx;
  line-height: 80rpx;
  color: #6c6d72;
  text-align: center;
  height: 240rpx;
  overflow: hidden;
}

.song-lyric-warp {
  transition: 0.5s;
  /* transform: translateY(-900rpx); */
}

.song-lyric-item {
  min-height: 80rpx;
}

.song-lyric-warp .active {
  color: #fff;
}

.more {
  color: #fff;
  font-size: 26rpx;
  text-decoration: underline;
  line-height: 80rpx;
  text-align: center;
}

.share-btn {
  margin-top: 40rpx;
  width: 330rpx;
  line-height: 70rpx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 35rpx;
  font-size: 26rpx;
  text-align: center;
}

.detail-like {
  box-sizing: border-box;
  margin-top: 74rpx;
  padding: 0 30rpx;
}

.detail-like-head {
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.detail-like-head > text {
  font-size: 32rpx;
  line-height: 58rpx;
}

.detail-like-head > view {
  width: 176rpx;
  height: 58rpx;
  text-align: center;
  line-height: 58rpx;
  border-radius: 29rpx;
  font-size: 24rpx;
  border: 1px solid #afb0b4;
}

.detail-like-head > view text {
  margin-right: 8rpx;
  vertical-align: middle;
}

.detail-like-main {
  margin-top: 20rpx;
}

.like-main-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.like-main-item > view:nth-of-type(1) {
  width: 84rpx;
  height: 84rpx;
  margin-right: 20rpx;
}

.like-main-item > view:nth-of-type(1) image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.like-main-item > view:nth-of-type(2) {
  flex: 1;
  padding-right: 10rpx;
}

.like-main-item > view:nth-of-type(2) .songName {
  color: #fff;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.like-main-item > view:nth-of-type(2) .songAr {
  font-size: 20rpx;
  color: #dadbde;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.like-main-item > view:nth-of-type(2) .songAr image {
  width: 26rpx;
  height: 18rpx;
  margin-right: 6rpx;
}

.like-main-item > view:nth-of-type(3) {
  width: 50rpx;
  height: 50rpx;
  color: #44454a;
}

.like-main-item > view:nth-of-type(3) text {
  font-size: 50rpx;
}

/* 精彩评论 */
.detail-comment {
  margin-top: 54rpx;
}

.comment-head {
  font-size: 40rpx;
  color: #fff;
}

.detail-comment {
  padding: 0 30rpx;
}

.comment-main-item {
  padding-top: 30rpx;
  display: flex;
}

.comment-l {
  width: 65rpx;
  margin-right: 20rpx;
}

.comment-l image {
  width: 65rpx;
  height: 65rpx;
  border-radius: 50%;
}

.comment-r {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-bottom: 1px solid #2a2b30;
  padding-top: 10rpx;
  padding-bottom: 30rpx;
}

.comment-r > view:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  color: #b7b8bc;
}

.comment-r > view:nth-of-type(1) .comment-msg {
  display: flex;
  flex-direction: column;
}

.comment-msg text:nth-of-type(1) {
  font-size: 24rpx;
  color: #b6b7bb;
}

.comment-msg text:nth-of-type(2) {
  /* line-height: 32rpx; */
  margin-top: 12rpx;
  font-size: 18rpx;
  color: #636469;
}

.comment-count {
  font-size: 20rpx;
}

.comment-count .iconfont {
  margin-left: 6rpx;
}

.comment-r > view:nth-of-type(2) {
  color: #fff;
  font-size: 28rpx;
}

.comment-content {
  font-size: 24rpx;
  margin-top: 16rpx;
  line-height: 44rpx;
}
</style>
